<template>
    <h2>排房信息显示</h2>
  
  
    <table class="table" border="1">
        <tr style="background-color: beige;">
            
            <td>排房编号</td>
            <td>房型名称</td>
            <td>房号</td>
            <td>操作</td>
            
        </tr>
        <tbody>
            <tr v-for="item in info">
         
                <td>{{ item.ntId }}</td>
                <td>{{ item.rtName }}</td>
                <td>{{ item.rnRoomnum }}</td>
            <td>
                <input type="button" value="移除" class="btn btn-danger" @click="Del(item.ntId)"/>
                <input type="button" value="详情" class="btn btn-success" @click="XQ(item.ntId)"/>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        一共{{ page.TotalCount }}条,每页{{ page.Size }}条,当前{{ page.Index }}/{{ page.PageCount }}页
        <a href="#" style="margin-left: 10px;" @click="Fanye(1)">首页</a>
        <a href="#" style="margin-left: 10px;" @click="Fanye(page.Index-1)">上一页</a>
        <a href="#" v-for="item in page.PageCount" style="margin-left: 10px;" @click="yema(item)" >{{ item }}</a>
        <a href="#" style="margin-left: 10px;" @click="Fanye(page.Index+1)">下一页</a>
        <a href="#" style="margin-left: 10px;" @click="Fanye(page.PageCount)">尾页</a>

        每页几条:<select v-model="wudi" @change="yrl">
            <option :value="2">==每页2条==</option>
            <option :value="3">==每页3条==</option>
            <option :value="4">==每页4条==</option>
            <option :value="5">==每页5条==</option>
            <option :value="6">==每页6条==</option>
        </select>
    </div>
</template>
<script setup lang="ts">
     import { ref,onMounted } from 'vue';
     import axios from 'axios';
     import { useRouter } from 'vue-router';


     const router=useRouter();

    onMounted(()=>{
        Show();
    })

    const info=ref([{
        "ntId": 1,
      "rnId": 1,
      "rnRoomnum": 110,
      "rtId": 2,
      "rtName": "普通房型",
      "delluoji": true
    }])

    const name=ref("");
    const maxsize=ref(0);
    const minsize=ref(0);
    const page=ref({
        Index:1,
        Size:2,
        TotalCount:5,
        PageCount:5,
    })

 

    const Show=()=>{
        axios.get("https://localhost:7010/api/RoomNumType/GetTypenum",{
            params:{
               
              Index:page.value.Index,
              Size:page.value.Size
            }
        })
        .then(res=>{
            info.value=res.data.items;

            page.value.PageCount=res.data.pageCount;
            page.value.TotalCount=res.data.totalCount;
        })
    }


   //翻页
   const Fanye=(a:number)=>{
        if(a<1){
            alert("当前已经是第一页");
            a=1;
        }
        if(a>page.value.PageCount){
            alert("当前已经是最后一页");
            a=page.value.PageCount;
        }
        page.value.Index=a;
        Show();
   }

  
   //页码
   const yema=(item:number)=>{
        page.value.Index=item;
        Show();
   }
   
   //也容量
   const wudi=ref(2);
   const yrl=()=>{
    page.value.Size=wudi.value;
    Show();
   }

  
   const Del=(id:number)=>{
        if(confirm("是否确定要删除?")){
            axios.put("https://localhost:7010/api/RoomNumType/Delnumtype?Id="+id)
        .then(res=>{
        if(res.data>0){
            alert('删除成功');
            Show();
        }
     
        else{
            alert('删除失败');
        }
        })
        .catch(err=>{
            console.log(err);
        })
        }
        
    }

    const XQ=(id:number)=>{
        router.push({
            name: 'Xiangqing',
            params:{
                id:id
            }
        })
    }
</script>